<!doctype html>
<html lang="en" itemscope itemtype="https://schema.org/Product">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="Sindre Sorhus">
		<meta name="description" content="JavaScript Fullscreen API demo">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta itemprop="name" content="screenfull">
		<meta itemprop="description" content="Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too.">
		<title>screenfull demo</title>
		<style>
		html {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			padding: 30px 10px 0 0;
			font-size: 20px;
			line-height: 1.4;
			color: #737373;
			background: #f0f0f0;
			-webkit-font-smoothing: antialiased;
		}

		hr {
			border: none;
			border-top: 1px solid #e6e6e6;
			margin: 20px 0;
		}

		a {
			color: #666;
		}

		h1 {
			margin: 0;
			font-size: 40px;
			text-align: center;
		}

		h1 span {
			color: #bbb;
		}

		ul {
			padding: 0 0 0 40px;
			margin: 1em 0;
		}

		button {
			font-size: 13px;
		}

		nav {
			margin: 0 auto;
		}

		.container {
			width: 500px;
			margin: 0 auto;
		}

		#repo-link {
			text-align: center;
			text-decoration: none;
			display: block;
			position: absolute;
			top: 20px;
			left: 20px;
		}

		#social {
			margin: 10px auto;
			text-align: center;
		}

		#container {
			width: 500px;
			padding: 30px 20px;
			margin: 0 auto 50px auto;
			background: #fcfcfc;
			text-align: center;
			border: 1px solid #b3b3b3;
			border-radius: 4px;
			box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
		}

		#container ul {
			padding: 0;
			margin: 40px 0 0 0;
			list-style: none;
		}

		#demo-img {
			width: 100%;
			height: auto;
		}

		#demo-img,
		#demo-video {
			cursor: pointer;
		}

		header p {
			font-size: 17px;
		}
		</style>
	</head>
	<body>
		<a id="repo-link" href="https://github.com/sindresorhus/screenfull">⬅ Back to the repo</a>
		<section id="container" class="container">
			<header>
				<h1>screenfull<span>.js</span></h1>
				<p>Simple wrapper for cross-browser usage of the JavaScript <a href="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Fullscreen API</a>, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too.</p>
			</header>
			<hr>
			<section>
				<p>Try out the Fullscreen API</p>
				<button id="request">Request</button>
				<button id="exit">Exit</button>
				<button id="toggle">Toggle</button>
				<button id="request2">Request document</button>
			</section>
			<section>
				<ul>
					<li id="supported"></li>
					<li id="status"></li>
					<li id="element"></li>
				</ul>
			</section>
			<input autofocus placeholder="Keyboard test">
			<hr>
			<section>
				<p>Click the image to make it fullscreen</p>
				<img id="demo-img" src="https://sindresorhus.com/unicorn" width="500">
			</section>
		</section>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="module">
		import screenfull from './index.js';

		$(function () {
			$('#supported').text(`Supported/allowed: ${screenfull.isEnabled}`);

			if (!screenfull.isEnabled) {
				return false;
			}

			$('#request').click(async () => {
				await screenfull.request($('#container')[0]);
				console.log('Browser entered fullscreen mode');

				// Does not require jQuery. Can be used like this too:
				// screenfull.request(document.getElementById('container'));
			});

			$('#exit').click(async () => {
				await screenfull.exit();
				console.log('Browser exited fullscreen mode');
			});

			$('#toggle').click(async () => {
				await screenfull.toggle($('#container')[0]);
				console.log(`Fullscreen mode: ${screenfull.isFullscreen ? 'enabled' : 'disabled'}`);
			});

			$('#request2').click(() => {
				screenfull.request();
			});

			$('#demo-img').click(() => {
				screenfull.toggle($('#demo-img')[0]);
			});

			function fullscreenchange() {
				const {element} = screenfull;

				$('#status').text(`Is fullscreen: ${screenfull.isFullscreen}`);

				if (element) {
					$('#element').text(`Element: ${element.localName}${element.id ? `#${element.id}` : ''}`);
				}

				if (!screenfull.isFullscreen) {
					$('#external-iframe').remove();
					document.body.style.overflow = 'auto';
				}
			}

			screenfull.on('change', fullscreenchange);

			// Set the initial values
			fullscreenchange();
		});
		</script>
	</body>
</html>
